<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      .box {
        border: 1px gray solid;
        border-radius: 10px;
        padding: 15px;
      }
      
      .title {
        font-size: 15px;
        font-weight: bold;
        margin: 10px;
      }
      
      .card {
        display: flex;
        column-gap: 100px;
        margin-left: 10px;
      }
    </style>
  </head>
  
  <body>
    <div id="app">
      <div class="box">
        <div class="title">基本使用</div>
        <div class="card">
          <!-- 输入框input，监听input事件 -->
          <div>
            <div>输入框：{{text}}</div>
            <input v-model="text"/>
          </div>
          
          <!-- 多行输入框textarea，不支持插值表达式，监听input事件 -->
          <div>
            <div>多行输入框：{{textarea}}</div>
            <textarea v-model="textarea" rows="5" cols="30"></textarea>
          </div>
          
          <!-- 单选框radio，记录选中单选框的value属性值，监听change事件 -->
          <div>
            <div>单选框：{{radio}}</div>
            <input type="radio" name="radioGroup" value="男" v-model="radio"/>男
            <input type="radio" name="radioGroup" value="女" v-model="radio"/>女
          </div>
          
          <!-- 多选框checkbox，监听change事件 -->
          <div>
            <!-- 多选框checkbox，字符串类型记录是否选中的布尔值，与value属性值无关，若想自定义值可使用Vue特有true-value和false-value属性，仅支持和v-model配套使用 -->
            <div>多选框：{{checkbox}}</div>
            <input type="checkbox" v-model="checkbox" value="字符串类型记录是否选中的布尔值，与value属性值无关"/>记录布尔值
            <input type="checkbox" v-model="checkbox" true-value="选中" false-value="未选中"/>记录自定义值
            <br><br>
            
            <!-- 多选框checkbox，数组类型记录选中单选框的value属性值 -->
            <div>多选框：{{checkboxs.join('、')}}</div>
            <input type="checkbox" name="checkboxGroup" value="篮球" v-model="checkboxs"/>篮球
            <input type="checkbox" name="checkboxGroup" value="足球" v-model="checkboxs"/>足球
            <input type="checkbox" name="checkboxGroup" value="排球" v-model="checkboxs"/>排球
            <input type="checkbox" name="checkboxGroup" value="棒球" v-model="checkboxs"/>棒球
          </div>
          
          <!-- 下拉框select，不存在value属性时记录option标签的textContent，存在value属性时记录value属性值，监听change事件 -->
          <!-- IOS系统上v-model初始值为空时将导致用户无法选择第一项，建议设第一项为空值禁用选项 -->
          <div>
            <div>下拉框：{{select}}</div>
            <select v-model="select">
              <option value="A">下拉选项A</option>
              <option value="B">下拉选项B</option>
              <option>下拉选项C</option>
            </select>
            <br><br>
            
            <div>下拉框：{{selects.join('、')}}</div>
            <select v-model="selects" multiple>
              <option value="A">下拉选项A</option>
              <option value="B">下拉选项B</option>
              <option>下拉选项C</option>
            </select>
          </div>
        </div>
      </div>
      <br>
      
      <div class="box">
        <div class="title">修饰符</div>
        <div class="card">
          <!-- .lazy：监听输入的change事件而不是input事件，失去焦点或回车时触发 -->
          <div>
            <div>Lazy输入框：{{textLazy}}</div>
            <input v-model.lazy="textLazy"/>
          </div>
          
          <!-- .number：将输入的合法字符串转为Number类型，若值无法被parseFloat()处理则返回原始值，当type未number时自动启用该修饰符 -->
          <div>
            <div>Number输入框：{{typeof textNumber}}</div>
            <input v-model.number="textNumber"/>
          </div>
          
          <!-- .trim：去除输入内容两端空格 -->
          <div>
            <div>Trim输入框：{{textTrim}}</div>
            <input v-model.trim="textTrim"/>
          </div>
        </div>
      </div>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    Vue.createApp({
      data() {
        return {
          text: '',
          textarea: '',
          radio: '',
          checkbox: '',
          checkboxs: [],
          select: 'A',
          selects: [],
          textLazy: '',
          textNumber: '',
          textTrim: '',
        };
      }
    }).mount('#app');
  </script>
</html>